<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Autoware WEB Controller</title>
    <link rel="shortcut icon" href="icon/autoware.ico">
    <link rel="stylesheet" href="css/autoware_web_controller_style.css" type="text/css">
    <script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript" src="js/autoware_state.js"></script>
    <script type="text/javascript" src="js/autoware_engage.js"></script>
    <script type="text/javascript" src="js/vehicle_engage.js"></script>
    <script type="text/javascript" src="js/velocity_limit.js"></script>
    <script type="text/javascript" src="js/lane_change_approval.js"></script>
    <style>
        .ui-menu {
            min-width: 90px;
            max-width: 150px;
        }

        .ui-menu .ui-menu-item {
            margin: 0;
            padding: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- menu -->
    <ul id="menu" class="menu">
        <li id="menu_autoware"><a href="#autoware">Autoware</a></li>
        <li id="menu_vehicle"><a href="#vehicle">Vehicle</a></li>
        <li><a href="https://github.com/tier4/Autoware-T4B" target="_blank">Github</a></li>
        <li><a href="https://webviz.io/app/" target="_blank">Webviz</a></li>
        <li class="ui-state-disabled"><a href="#">Amesville</a></li>
    </ul>
    <div class="contents">
        <h1>
            Status： <label id="state">Disconnect</label>
        </h1>
        <div id="autoware">
            <h2>Autoware</h2>

            <h3>Autoware State : <span id="autoware_state"> - </span></h3>
            <textarea readonly id="autoware_state_msg" rows="20", cols="200"></textarea>

            <h3>Autoware Engage :<span id="autoware_engage_info"> - </span></h3>
            <form action="javascript:AutowareEngagePublisher.send();" id="ui">
                <input type="submit" value="Engage" id="btn" /><br />
            </form>
            <form action="javascript:AutowareDisengagePublisher.send();" id="ui">
                <input type="submit" value="Disengage" id="btn" /><br />
            </form>
            <div>
                <span>Status:</span>
                <span id="autoware_engage_status"> - </span>
            </div>
            <h3>Vehicle Engage</h3>
            <form action="javascript:VehicleEngagePublisher.send();" id="ui">
                <input type="submit" value="Engage" id="btn" /><br />
            </form>
            <form action="javascript:VehicleDisengagePublisher.send();" id="ui">
                <input type="submit" value="Disengage" id="btn" /><br />
            </form>
            <div>
                <span>Status:</span>
                <span id="vehicle_engage_status"> - </span>
            </div>
            <div>
                <span>Control Mode:</span>
                <span id="vehicle_control_mode_status"> - </span>
            </div>
            <h3>Velocity Limit : <span id="velocity_limit_info"> - </span></h3>
            <form action="javascript:VelocityLimitPublisher.send();" id="ui" name="velocity_limit_form">
                <input type="text" name="velocity_limit">
                <input type="submit" value="Send" id="btn" /><br />
            </form>
            <div>
                <span>Status:</span>
                <span id="velocity_limit_status"> - </span>
                <span>km/h</span>
            </div>
            <h3>Lane Change Approval : <span id="lane_change_approval_info"> - </span></h3>
            <form action="javascript:LaneChangeApprovalPublisher.send();" id="ui">
                <input type="submit" value="Approve" id="btn" /><br />
            </form>
            <div>
                <span>Status:</span>
                <span id="lane_change_approval_status"> - </span>
            </div>
        </div>
        <div id="vehicle">
            <h2>Vehicle</h2>
            <hr size="2" color="#333333" width="100%">
        </div>
    </div>
</body>
<script type="text/javascript" src="js/menu.js"></script>

</html>
